<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="../common/head.jsp" %>
<div class="right_col" role="main">
    <div class="clearfix"></div>
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title row">
                <h2>商品类别信息列表 </h2>
                <div class="clearfix"></div>
            </div>
            <!-- 按钮 -->
            <div class="row">
                <form class="form-inline" action="/employee/flatform/CommodityType/getByParams" method="get">
					<span class="row">
						<div class="form-group"><label>类别名称:</label>
							<input type="text" class="form-control" name="comType">
						</div>
						<button class="btn btn-primary" type="submit">查询</button>
						<button type="button" class="btn btn-primary " data-toggle="modal"
                                data-target="#myModal">新增</button>
					</span>
                </form>
            </div>
            <div class="row">
                <div class="x_content">
                    <table id="datatable" class="table table-striped table-bordered table-hover">
                        <tr>
                            <th>类名id</th>
                            <th>类别名称</th>
                        </tr>

                        <c:forEach items="${pageInfo.list}" var="commodityType">
                            <tr>
                                <th>${commodityType.id}</th>
                                <th>${commodityType.comType}</th>
                            </tr>
                        </c:forEach>
                    </table>
                </div>
            </div>
            <!-- Modal 做完之后再优化 -->
            <form class="form-horizontal form-label-left" method="post"
                  action="/employee/flatform/CommodityType/insert" onsubmit="return checkall()">
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">新增类别</h4>
                            </div>
                            <div class="modal-body">
                                <div class="item form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-5">
                                        商品类型
                                        <span>*</span>
                                    </label>
                                    <div class="col-md-6 col-sm-6 col-xs-5">
                                        <input id="comType" name="comType" class="form-control col-md-7 col-xs-5"
                                               type="text" required/><span id="demo2"
                                                                                  style="color: red;"></span>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="submit" class="btn btn-primary">添加</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <!-- 显示分页信息 -->
            <div class="row">
                <!--分页文字信息  -->
                <div class="col-md-6">当前 ${pageInfo.pageNum }页,总${pageInfo.pages }
                    页, 总 ${pageInfo.total } 条记录
                </div>
                <!-- 分页条信息 -->
                <div class="col-md-6">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li>
                                <a href="${pageContext.request.contextPath }/employee/flatform/CommodityType/getByParams?pn=1">首页</a>
                            </li>
                            <c:if test="${pageInfo.hasPreviousPage }">
                                <li>
                                    <a href="${pageContext.request.contextPath }/employee/flatform/CommodityType/getByParams?pn=${pageInfo.pageNum-1}"
                                       aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
                                    </a></li>
                            </c:if>


                            <c:forEach items="${pageInfo.navigatepageNums }" var="page_Num">
                                <c:if test="${page_Num == pageInfo.pageNum }">
                                    <li class="active"><a href="#">${page_Num }</a></li>
                                </c:if>
                                <c:if test="${page_Num != pageInfo.pageNum }">
                                    <li>
                                        <a href="${pageContext.request.contextPath }/employee/flatform/CommodityType/getByParams?pn=${page_Num }">${page_Num }</a>
                                    </li>
                                </c:if>

                            </c:forEach>
                            <c:if test="${pageInfo.hasNextPage }">
                                <li>
                                    <a href="${pageContext.request.contextPath }/employee/flatform/CommodityType/getByParams?pn=${pageInfo.pageNum+1 }"
                                       aria-label="Next"> <span aria-hidden="true">&raquo;</span>
                                    </a></li>
                            </c:if>
                            <li>
                                <a href="${pageContext.request.contextPath }/employee/flatform/CommodityType/getByParams?pn=${pageInfo.pages}">末页</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
<%@include file="../common/footer.jsp" %>
<script type="text/javascript">
    /* 校验整个表单 */
    function checkall(){
        var message = confirm("是否确认要添加?");
        if (message == true) {
            // 确认时做的操作 var
            alert("添加成功");
        }
    }
</script>